@charset "utf-8";

/*
 * WaterWave
 *
 * TODO: descriptions
 */
.ucd-waterwave {
	width: 100%;
  height: 100%;
}

.ucd-waterwave-canvas {
  width: 100%;
  height: 100%;
}

.ucd-waterwave-label {
  position: absolute;
  width: 120px;
  height: 75px;
  font-size: 60px;
  text-align: center;
}

.ucd-waterwave-wave-0 {
  animation: waterWaveMoveRight 8s linear 0s infinite normal;
}

.ucd-waterwave-wave-1 {
  animation: waterWaveMoveLeft 3s linear 0s infinite normal;
}

@keyframes waterWaveMoveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-224px);
  }
}

@keyframes waterWaveMoveLeft {
  0% {
    transform: translateX(-224px);
  }
  100% {
    transform: translateX(0);
  }
}

.ucd-waterwave-label {
    margin-top: -52px;
    /*text-transform: uppercase;*/
  }
  .ucd-waterwave-label-top {
    font-size: 0.3em;
    visibility: hidden;
  }

  .ucd-waterwave-label-bottom {
    font-size: 0.3em;
  }

  .demoRing .ucd-waterwave-wave-0 {
    animation: waterWaveMove 4s linear 0s infinite normal;
  }

  @keyframes waterWaveMove {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200px);
    }
  }